<template>
  <div>
            <div class="text-center mb-6">
              <h2 class="text-xl font-semibold mb-2">请选择注册方式</h2>
              <p class="text-base-content/70">选择您想要使用的联系方式进行注册</p>
            </div>

            <div class="grid grid-cols-1 gap-4">
              <button
                type="button"
                class="btn btn-lg flex items-center justify-center p-6 gap-3"
                :class="{ 'bg-primary/10 border-primary': registerStore.contactType === 'email' }"
                @click="selectContactType('email')"
              >
                <div>
                  <font-awesome-icon icon="envelope" size="xl" class="text-primary"></font-awesome-icon>
                </div>
                <div class="text-left">
                  <div class="font-medium text-lg">邮箱注册</div>
                  <div class="text-sm text-base-content/60">使用邮箱地址注册账号</div>
                </div>
              </button>

              <button
                type="button"
                class="btn btn-lg flex items-center justify-center p-6 gap-3"
                :class="{ 'bg-primary/10 border-primary': registerStore.contactType === 'mobile_phone' }"
                @click="selectContactType('mobile_phone')"
              >
                <div>
                  <font-awesome-icon icon="mobile" size="xl" class="text-primary"></font-awesome-icon>
                </div>
                <div class="text-left">
                  <div class="font-medium text-lg">手机号注册</div>
                  <div class="text-sm text-base-content/60">使用手机号码注册账号</div>
                </div>
              </button>
            </div>
            <div class="flex justify-end mt-8">
              <button type="button" class="btn btn-primary" @click="registerStore.goToStep($router,1)" :disabled="!registerStore.contactType">
                下一步
                <font-awesome-icon icon="arrow-right" class="ml-1"></font-awesome-icon>
              </button>
            </div>
          </div>
</template>

<script>
import {useRegisterStore} from '@/pages/guest/register/register'
const registerStore = useRegisterStore();
export default {
  components: {
    
  },
  data() {
    return {
      registerStore
    }
  },
  computed: {
  
  },
  methods: {
    selectContactType(type) {
      this.registerStore.contactType = type;
    }
  }
}
</script>
